<div class="content-margin">
    <div class="flex-vertical absolute-fill">
        <div class="flex-horizontal flex-wrap margin-bottom margin-bottom-sm" role="form">
            <div class="form-inline">
                <input type="text" accesskey="/" class="form-control" placeholder="Filter" title="Filter indexes (Alt+/)" data-bind="textInput: searchText, enable: hasAnyData" />
                <button class="btn btn-default" data-bind="click: expandAll, visible: canExpandAll, enable: hasAnyData" title="Expand all indexes performance details"><i class="icon-expand"></i><span>Expand All</span></button>
                <button class="btn btn-default" data-bind="click: collapseAll, visible: !canExpandAll(), enable: hasAnyData" title="Collapse all indexes performance details"><i class="icon-collapse"></i><span>Collapse All</span></button>
                <button class="btn btn-default" data-bind="click: exportAsJson, enable: hasAnyData, visible: !isImport()" title="Export current performance graph to a file">
                    <i class="icon-export"></i><span>Export</span>
                </button>
                <label for="importFilePicker" class="btn btn-default">
                    <i class="icon-import"></i><span>Import</span>
                </label>
                <div class="input-group file-input" title="Import performance graph file">
                    <input type="file" id="importFilePicker" data-bind="event: { change: _.partial(fileSelected, $element) }" tabindex="-1" accept=".json">
                </div>
            </div>
        </div>
        <div class="flex-horizontal flex-shrink-0">
            <div data-bind="visible: liveViewClient() && !bufferIsFull()">
                <small>Data buffer usage: <span data-bind="text: bufferUsage() + '%'"></span></small>
            </div>
            <div data-bind="visible: bufferIsFull">
                <small>Data buffer is full, clear graph data to continue</small>
            </div>
            <div class="flex-separator"></div>
            <button class="btn btn-default btn-sm margin-right margin-right-sm" data-bind="click: clearBrush, visible: clearSelectionVisible">
                <span>Clear selection</span>
            </button>
            <button class="btn btn-sm btn-default" data-bind="click: closeImport, visible: isImport" title="Return to currently selected database performance graph">
                <i class="icon-cancel"></i><span data-bind="text: 'Close import (' + importFileName() + ')'">Close import</span>
            </button>
            <div class="btn-group" data-bind="visible: !isImport()">
                <button class="btn btn-sm btn-info btn-checkable" data-bind="click: toggleScroll, css: { active: autoScroll }">
                    <i class="icon-logs"></i> <span>Monitoring (tail -f)</span>
                </button>
                <button class="btn btn-sm btn-danger" data-bind="click: clearGraphWithConfirm">
                    <i class="icon-cancel"></i><span>Clear graph</span>
                </button>
            </div>
        </div>
        <div class="flex-grow dynamic-container">
            <div data-bind="visible: !hasAnyData()">
                <div class="row">
                    <div class="col-sm-8 col-sm-offset-2 col-lg-6 col-lg-offset-3">
                        <div data-bind="visible: !loading()">
                            <i class="icon-xl icon-empty-set text-muted"></i>
                            <h2 class="text-center text-muted">No data.</h2>
                        </div>
                        <div data-bind="visible: loading()">
                            <i class="icon-xl global-spinner text-muted"></i>
                            <h2 class="text-center text-muted">Loading ...</h2>
                        </div>
                    </div>
                </div>
            </div>
            <section id="indexingPerformance" style="position: relative" data-bind="visible: hasAnyData">
                <section class="metricsContainer" id="indexPerfMetricsContainer">
                    <div class="tooltip tooltip-inner" style="opacity: 0; display: none">
                    </div>
                </section>
                <div class="color-definitions">
                    <div class="axis"></div>
                    <div class="gaps"></div>
                    <div class="brushChartColor"></div>
                    <div class="brushChartStrokeColor"></div>
                    <div class="trackBackground"></div>
                    <div class="trackNameBg"></div>
                    <div class="faulty"></div>
                    <div class="itemWithError"></div>
                    <div class="trackNameFg"></div>
                    <div class="openedTrackArrow"></div>
                    <div class="closedTrackArrow"></div>
                    <div class="stripeTextColor"></div>
                    <div class="progressStripes"></div>
                    <div class="tracks">
                        <div class="concurrentlyRunning" data-property="Wait/ConcurrentlyRunningIndexesLimit"></div>
                        <div class="collection" data-property="Collection"></div>
                        <div class="indexing" data-property="Indexing"></div>
                        <div class="cleanup" data-property="Cleanup"></div>
                        <div class="references" data-property="References"></div>
                        <div class="map" data-property="Map"></div>
                        <div class="storageDocumentRead" data-property="Storage/DocumentRead"></div>
                        <div class="storageUpdateReferences" data-property="Storage/UpdateReferences"></div>
                        <div class="linq" data-property="Linq"></div>
                        <div class="jint" data-property="Jint"></div>
                        <div class="loadDocument" data-property="LoadDocument"></div>
                        <div class="loadAttachment" data-property="LoadAttachment"></div>
                        <div class="bloom" data-property="Bloom"></div>
                        <div class="luceneDelete" data-property="Lucene/Delete"></div>
                        <div class="luceneSuggestion" data-property="Lucene/Suggestion"></div>
                        <div class="luceneAddDocument" data-property="Lucene/AddDocument"></div>
                        <div class="luceneConvert" data-property="Lucene/Convert"></div>
                        <div class="createBlittableJson" data-property="CreateBlittableJson"></div>
                        <div class="aggregationBlittableJson" data-property="Aggregation/BlittableJson"></div>
                        <div class="getMapEntriesTree" data-property="GetMapEntriesTree"></div>
                        <div class="getMapEntries" data-property="GetMapEntries"></div>
                        <div class="storageRemoveMapResult" data-property="Storage/RemoveMapResult"></div>
                        <div class="storagePutMapResult" data-property="Storage/PutMapResult"></div>
                        <div class="reduce" data-property="Reduce"></div>
                        <div class="tree" data-property="Tree"></div>
                        <div class="aggregationLeafs" data-property="Aggregation/Leafs"></div>
                        <div class="aggregationBranches" data-property="Aggregation/Branches"></div>
                        <div class="storageReduceResults" data-property="Storage/ReduceResults"></div>
                        <div class="nestedValues" data-property="NestedValues"></div>
                        <div class="storageRead" data-property="Storage/Read"></div>
                        <div class="aggregationNestedValues" data-property="Aggregation/NestedValues"></div>
                        <div class="luceneCommit" data-property="Lucene/Commit"></div>
                        <div class="luceneApplyDeletes" data-property="Lucene/ApplyDeletes"></div>
                        <div class="luceneMerge" data-property="Lucene/Merge"></div>
                        <div class="storageCommit" data-property="Storage/Commit"></div>
                        <div class="luceneRecreateSearcher" data-property="Lucene/RecreateSearcher"></div>
                        <div class="saveOutputDocuments" data-property="SaveOutputDocuments"></div>
                        <div class="deleteOutputDocuments" data-property="DeleteOutputDocuments"></div>
                        <div class="loadCompareExchangeValue" data-property="LoadCompareExchangeValue"></div>
                        <div class="coraxDelete" data-property="Corax/Delete"></div>
                        <div class="coraxDictionaryTraining" data-property="Corax/DictionaryTraining"></div>
                        <div class="coraxCommit" data-property="Corax/Commit"></div>
                        <div class="coraxConvert" data-property="Corax/Convert"></div>
                        <div class="coraxAddDocument" data-property="Corax/AddDocument"></div>
                        <div class="textualValues" data-property="TextualValues"></div>
                        <div class="floatingValues" data-property="FloatingValues"></div>
                        <div class="integerValues" data-property="IntegerValues"></div>
                        <div class="vectorValues" data-property="VectorValues"></div>
                        <div class="deletions" data-property="Deletions"></div>
                        <div class="spatialValues" data-property="SpatialValues"></div>
                        <div class="storedValues" data-property="StoredValues"></div>
                        <div class="suggestions" data-property="Suggestions"></div>
                        <div class="coraxField" data-property="Field"></div>
                        <div class="documentsCleanup" data-property="DocumentsCleanup"></div>

                        <div class="unknownOperation" data-property="UnknownOperation"></div>
                    </div>
                </div>
            </section>
        </div>
        <div class="results-error" data-bind="visible: !isConnectedToWebSocket() && !isImport()">
            <div class="help-block bg-warning text-warning">
                <span><i class="btn-spinner"></i><span class="margin-left">Trying to Connect</span></span>
            </div>
        </div>
    </div>
</div>
